<template>
	<view class="container">
		<view class="circleBox"  @click="navTo('/subpkg/petInfo/petInfo?id=' + activityList.categoryId)">
		  <view class="circleBox_left">
		    <image :src="activityList.category.coverImage" mode="aspectFill"></image>
        <view class="circleBox_left_title">
          <h1>{{activityList.category.categoryName}}</h1>
          <text>{{activityList.category.joiners ? activityList.category.joiners : ''}}人加入</text>
        </view>
		  </view>
      <view class="circleBox_right">
        进入
      </view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"circle_label",
		data() {
			return {
				
			};
		},
    props:{
      activityList:{
        type:[Object,Array],
        default:true
      }
    },
    methods:{
      navTo(url){
        uni.navigateTo({
          url:url
        })
      }
    }
	}
</script>

<style lang="scss">
.circleBox{
  height: 150rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10rpx 0;
  padding: 0 30rpx;
  background-color: #fff;
  .circleBox_left{
    display: flex;
    image{
      width: 100rpx;
      height: 100rpx;
      border-radius: 10rpx;
      margin-right: 22rpx;
    }
    .circleBox_left_title{
      display: flex;
      flex-direction: column;
      justify-content: center;
      h1{
        font-size: 26rpx;
        color: rgba(61, 61, 61, 1);
        margin-bottom: 10rpx;
      }
      text{
        font-size: 24rpx;
        color: rgba(61, 61, 61, .5);
      }
    }
  }
  .circleBox_right{
    width: 128rpx;
    height: 52rpx;
    border-radius: 26rpx;
    background-color: rgba(253, 211, 56, 1);
    text-align: center;
    line-height: 52rpx;
    font-size: 26rpx;
    color: rgba(51, 51, 51, 1);
  }
}
</style>
